<template>
  <div class="right">
    <div class="head">
      <p class="sn">ABCKS-23884-2832332921</p>
      <p>配件清单</p>
    </div>
    <t-table
      rowKey="index"
      class="table-class mt24"
      :data="lists2"
      :columns="columns2"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :size="size"
      :max-height="maxHeight2"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :showHeader="showHeader"
      cellEmptyContent="-"
      resizable
    >
      <template #title-slot-index></template>
      <template #title-slot-option></template>
      <template #index="{col, colIndex, record, row, rowIndex }">
        <p>{{ rowIndex + 1 }}</p>
      </template>
      <template #title="{col, colIndex, record, row, rowIndex }">
        <div>
          <h3 class="item-title">{{ row.title }}</h3>
          <p class="item-sn">{{ row.sn }}</p>
        </div>
      </template>
      <template #option="{col, colIndex, record, row, rowIndex }">
        <t-space size="12px">
          <t-button theme="danger" variant="outline">删除</t-button>
        </t-space>
      </template>
    </t-table>

    <div v-if="showAddForm" class="add-form">
      <t-form :data="formData" :rules="rules" ref="form" layout="inline" label-align="top">
        <t-form-item name="title" style="width: 372px; margin-right: 16px;">
          <t-input v-model="params_data.title" placeholder="输入配件名称" />
        </t-form-item>
        <t-form-item name="num" style="width: 110px;margin-right: 16px;">
          <t-input v-model="params_data.num" theme="column" style="width: 100%;" placeholder="输入数量" />
        </t-form-item>
        <t-form-item name="price" style="width: 96px;margin-right: 0;">
          <t-input v-model="params_data.price" theme="column" style="width: 100%;" placeholder="¥0.00" />
        </t-form-item>
        <t-form-item name="unit" style="width: 200px;margin-right: 16px;">
          <t-input v-model="params_data.unit" theme="column" style="width: 100%;" placeholder="输入单位" />
        </t-form-item>
        <t-form-item name="sn" style="flex: 1;margin-right: 0;">
          <t-input v-model="params_data.sn" theme="column" style="width: 100%;" placeholder="输入SN码" />
        </t-form-item>
        <t-form-item name="remark" style="width: 100%;margin-right: 0">
          <t-input v-model="params_data.remark" theme="column" style="width: 100%;" placeholder="输入备注" />
        </t-form-item>
        <t-form-item name="remark" style="width: 100%;margin-right: 0">
          <t-space size="12px">
            <t-button theme="primary" class="confirm-btn" @click="handleCloseAdd">保存</t-button>
            <t-button theme="default" variant="outline" class="cancel-btn2" @click="handleCloseAdd">取消</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </div>

    <div v-else="showAddForm" class="pt16" >
      <t-button theme="default" variant="outline" class="add-btn" @click="handleShowAdd">
        <p class="flex align-center">
          <icon-font name="add-circle" class="mr8" />
          新增一条
        </p>
      </t-button>
    </div>

    <t-divider />

    <t-space size="8px">
      <t-button theme="default" variant="outline" class="cancel-btn" @click="showInventory = !showInventory">取消</t-button>
      <t-button theme="primary" variant="outline" class="confirm-btn" style="color: var(--td-brand-color)" @click="showInventory = !showInventory">确认加入</t-button>
    </t-space>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";

const initialData2 = [];
const total2 = 50;
for (let i = 0; i < total2; i++) {
  initialData2.push({
    index: i + 1,
    sn: 'JDKJKJ824348292',
    title: 'DJI Avata 2 智能飞行电池',
    num: '13',
    unit: '个',
    price: '¥83992',
    remark: 'drone'
  });
}

export default {
  name: 'ConfigRight',
  components: { IconFont },
  data() {
    return {
      params_data: {
        title: '',  // 名称
        sn: '', // 编号
        num: '',  // 数量
        unit: '', // 单位
        price: '',  // 单价
        remark: '', // 备注
      },
      showInventory: true,
      lists2: initialData2,
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns2: [
        {colKey: 'index', title: 'title-slot-index', width: 50},
        {colKey: 'title', title: '名称', ellipsis: true},
        {colKey: 'num', title: '数量', width: 62},
        {colKey: 'unit', title: '单位', width: 62},
        {colKey: 'price', title: '单价', width: 82},
        {colKey: 'remark', title: '备注', width: 72, ellipsis: true},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 84},
      ],
      showAddForm: false,
      maxHeight2: 427,
    }
  },
  methods: {
    handleShowAdd() {
      this.showAddForm = true
      this.maxHeight2 = 211
    },
    handleCloseAdd() {
      this.showAddForm = false
      this.maxHeight2 = 427
    },
  }
}
</script>

<style lang="less" scoped>

.right {
  width: 686px;
  padding: 24px;
  border-left: 1px solid #0000001A;

  .head {
    color: black;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;

    display: flex;
    padding: 10px 14px;
    align-items: center;

    background-color: #F3F6FF;

    .sn {
      font-weight: 600;
      padding-right: 8px;
    }
  }


  .item-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }

  .item-sn {
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #000000E5;
  }


  /deep/ .add-form {
    margin-top: 24px;
    padding: 20px 16px;
    background-color: #F3F3F3;
    border-radius: var(--td-radius-default);

    .t-input, .t-input.t-is-readonly {
      background-color: #FFFFFF;
    }
  }


  .add-btn {
    width: 140px;
    height: 42px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    border-radius: var(--td-radius-medium);
  }

}

.footer-btn {
  width: 100%;
  display: flex;
  padding-top: 24px;
  align-items: center;
  justify-content: space-between;
}

.danger-btn {
  width: 112px;
  height: 40px;
  border-radius: var(--td-radius-medium);
}

.confirm-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

.cancel-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  background-color: #B8B8B8;
  border-radius: var(--td-radius-medium);
}

.cancel-btn2 {
  width: 82px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}
</style>
